<template>
    <div class="outside">

        <div class="flip-card" style="display: flex;justify-content: center;align-items: center;">
            <div class="flip-card-inner">
                <div class="flip-card-front">

                </div>
                <div class="flip-card-back" style="background-color: white;">
                    <div>
                        <lord-icon
    src="https://cdn.lordicon.com/mxddzdmt.json"
    trigger="loop"
    style="width:250px;height:250px">
</lord-icon>
                    </div>
                    <div style="display: flex;justify-content: center;">
                        <a-form :model="formState" name="basic" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }"
                            autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed" style="width:440px;">
                            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
                                <a-input v-model:value="formState.username" />
                            </a-form-item>

                            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                                <a-input-password v-model:value="formState.password" />
                            </a-form-item>

                            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                                <div class="btndiv" style="margin-left: -170px;">
                                    <a-button type="primary" html-type="submit">注册</a-button>
                                    <a-button type="primary" html-type="reset">重置</a-button>
                                </div>
                            </a-form-item>
                        </a-form>
                        <div class="loader" style="position: relative;bottom:0px;right:0px" v-show="isShow"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onBeforeUnmount } from 'vue';
import { registered } from "@/api/VipApi"
import { useRouter } from 'vue-router';

interface FormState {
    username: string;
    password: string;
    remember: boolean;
}
export default defineComponent({
    setup() {
        const router = useRouter()
        const formState = reactive<FormState>({
            username: '',
            password: '',
            remember: true,
        });

        let isShow = ref(false)
        let timer: any = null
        const onFinish = (values: any) => {
            registered(values).then((res:any) => {
                if (res.code == 200) {
                    isShow.value = true
                    timer = setTimeout(() => {
                        router.push("/login")
                    }, 1000);
                }
            })
        };
        onBeforeUnmount(() => {
            clearTimeout(timer)
        })
        const onFinishFailed = (errorInfo: any) => {
            console.log('Failed:', errorInfo);
        };
        return {
            formState,
            onFinish,
            onFinishFailed,
            isShow
        };
    },
});
</script>
  
  

<style lang="less" scoped>
.outside {
    background: url(@/assets/740296.png) no-repeat center center;
    display: flex;
    justify-content: center;
    align-items: center;


    .formdiv {
        width: 700px;
        height: 500px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: white;
        box-shadow: 3px 2px 14px #252525;
        border-radius: 6px;


        .wheel-and-hamster {
            --dur: 1s;
            position: relative;
            width: 12em;
            height: 12em;
            font-size: 14px;
        }

        .wheel,
        .hamster,
        .hamster div,
        .spoke {
            position: absolute;
        }

        .wheel,
        .spoke {
            border-radius: 50%;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .wheel {
            background: radial-gradient(100% 100% at center, hsla(0, 0%, 60%, 0) 47.8%, hsl(0, 0%, 60%) 48%);
            z-index: 2;
        }

        .hamster {
            animation: hamster var(--dur) ease-in-out infinite;
            top: 50%;
            left: calc(50% - 3.5em);
            width: 7em;
            height: 3.75em;
            transform: rotate(4deg) translate(-0.8em, 1.85em);
            transform-origin: 50% 0;
            z-index: 1;
        }

        .hamster__head {
            animation: hamsterHead var(--dur) ease-in-out infinite;
            background: hsl(30, 90%, 55%);
            border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
            box-shadow: 0 -0.25em 0 hsl(30, 90%, 80%) inset,
                0.75em -1.55em 0 hsl(30, 90%, 90%) inset;
            top: 0;
            left: -2em;
            width: 2.75em;
            height: 2.5em;
            transform-origin: 100% 50%;
        }

        .hamster__ear {
            animation: hamsterEar var(--dur) ease-in-out infinite;
            background: hsl(0, 90%, 85%);
            border-radius: 50%;
            box-shadow: -0.25em 0 hsl(30, 90%, 55%) inset;
            top: -0.25em;
            right: -0.25em;
            width: 0.75em;
            height: 0.75em;
            transform-origin: 50% 75%;
        }

        .hamster__eye {
            animation: hamsterEye var(--dur) linear infinite;
            background-color: hsl(0, 0%, 0%);
            border-radius: 50%;
            top: 0.375em;
            left: 1.25em;
            width: 0.5em;
            height: 0.5em;
        }

        .hamster__nose {
            background: hsl(0, 90%, 75%);
            border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
            top: 0.75em;
            left: 0;
            width: 0.2em;
            height: 0.25em;
        }

        .hamster__body {
            animation: hamsterBody var(--dur) ease-in-out infinite;
            background: hsl(30, 90%, 90%);
            border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
            box-shadow: 0.1em 0.75em 0 hsl(30, 90%, 55%) inset,
                0.15em -0.5em 0 hsl(30, 90%, 80%) inset;
            top: 0.25em;
            left: 2em;
            width: 4.5em;
            height: 3em;
            transform-origin: 17% 50%;
            transform-style: preserve-3d;
        }

        .hamster__limb--fr,
        .hamster__limb--fl {
            clip-path: polygon(0 0, 100% 0, 70% 80%, 60% 100%, 0% 100%, 40% 80%);
            top: 2em;
            left: 0.5em;
            width: 1em;
            height: 1.5em;
            transform-origin: 50% 0;
        }

        .hamster__limb--fr {
            animation: hamsterFRLimb var(--dur) linear infinite;
            background: linear-gradient(hsl(30, 90%, 80%) 80%, hsl(0, 90%, 75%) 80%);
            transform: rotate(15deg) translateZ(-1px);
        }

        .hamster__limb--fl {
            animation: hamsterFLLimb var(--dur) linear infinite;
            background: linear-gradient(hsl(30, 90%, 90%) 80%, hsl(0, 90%, 85%) 80%);
            transform: rotate(15deg);
        }

        .hamster__limb--br,
        .hamster__limb--bl {
            border-radius: 0.75em 0.75em 0 0;
            clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 90%, 70% 100%, 30% 100%, 40% 90%, 0% 30%);
            top: 1em;
            left: 2.8em;
            width: 1.5em;
            height: 2.5em;
            transform-origin: 50% 30%;
        }

        .hamster__limb--br {
            animation: hamsterBRLimb var(--dur) linear infinite;
            background: linear-gradient(hsl(30, 90%, 80%) 90%, hsl(0, 90%, 75%) 90%);
            transform: rotate(-25deg) translateZ(-1px);
        }

        .hamster__limb--bl {
            animation: hamsterBLLimb var(--dur) linear infinite;
            background: linear-gradient(hsl(30, 90%, 90%) 90%, hsl(0, 90%, 85%) 90%);
            transform: rotate(-25deg);
        }

        .hamster__tail {
            animation: hamsterTail var(--dur) linear infinite;
            background: hsl(0, 90%, 85%);
            border-radius: 0.25em 50% 50% 0.25em;
            box-shadow: 0 -0.2em 0 hsl(0, 90%, 75%) inset;
            top: 1.5em;
            right: -0.5em;
            width: 1em;
            height: 0.5em;
            transform: rotate(30deg) translateZ(-1px);
            transform-origin: 0.25em 0.25em;
        }

        .spoke {
            animation: spoke var(--dur) linear infinite;
            background: radial-gradient(100% 100% at center, hsl(0, 0%, 60%) 4.8%, hsla(0, 0%, 60%, 0) 5%),
                linear-gradient(hsla(0, 0%, 55%, 0) 46.9%, hsl(0, 0%, 65%) 47% 52.9%, hsla(0, 0%, 65%, 0) 53%) 50% 50% / 99% 99% no-repeat;
        }

        /* Animations */
        @keyframes hamster {

            from,
            to {
                transform: rotate(4deg) translate(-0.8em, 1.85em);
            }

            50% {
                transform: rotate(0) translate(-0.8em, 1.85em);
            }
        }

        @keyframes hamsterHead {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(0);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(8deg);
            }
        }

        @keyframes hamsterEye {

            from,
            90%,
            to {
                transform: scaleY(1);
            }

            95% {
                transform: scaleY(0);
            }
        }

        @keyframes hamsterEar {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(0);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(12deg);
            }
        }

        @keyframes hamsterBody {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(0);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(-2deg);
            }
        }

        @keyframes hamsterFRLimb {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(50deg) translateZ(-1px);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(-30deg) translateZ(-1px);
            }
        }

        @keyframes hamsterFLLimb {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(-30deg);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(50deg);
            }
        }

        @keyframes hamsterBRLimb {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(-60deg) translateZ(-1px);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(20deg) translateZ(-1px);
            }
        }

        @keyframes hamsterBLLimb {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(20deg);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(-60deg);
            }
        }

        @keyframes hamsterTail {

            from,
            25%,
            50%,
            75%,
            to {
                transform: rotate(30deg) translateZ(-1px);
            }

            12.5%,
            37.5%,
            62.5%,
            87.5% {
                transform: rotate(10deg) translateZ(-1px);
            }
        }

        @keyframes spoke {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(-1turn);
            }
        }
    }
}

.btndiv {
    display: flex;
    justify-content: space-around;
}

.loader {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
}

.loader:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #f0808050;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
}

.loader:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #f08080;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
}

@keyframes jump7456 {
    15% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, .9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes shadow324 {

    0%,
    100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1);
    }
}

.flip-card {
    background-color: transparent;
    width: 700px;
    height: 390px;
    perspective: 1000px;
}

.heading {
    position: absolute;
    letter-spacing: .2em;
    font-size: 0.5em;
    top: 2em;
    left: 18.6em;
}

.logo {
    position: absolute;
    top: 6.8em;
    left: 11.7em;
}

.chip {
    position: absolute;
    top: 2.3em;
    left: 1.5em;
}

.contactless {
    position: absolute;
    top: 3.5em;
    left: 12.4em;
}

.number {
    position: absolute;
    font-weight: bold;
    font-size: .6em;
    top: 8.3em;
    left: 1.6em;
}

.valid_thru {
    position: absolute;
    font-weight: bold;
    top: 635.8em;
    font-size: .01em;
    left: 140.3em;
}

.date {
    position: absolute;
    font-weight: bold;
    font-size: 0.5em;
    top: 13.6em;
    left: 3.2em;
}

.name {
    position: absolute;
    font-weight: bold;
    font-size: 0.5em;
    top: 16.1em;
    left: 2em;
}

.strip {
    position: absolute;
    background-color: rgb(255, 255, 255);
    width: 15em;
    height: 1.5em;
    top: 2.4em;
    background: repeating-linear-gradient(45deg,
            #cacaca,
            #b6b6b6 10px,
            #e0dcdc 10px,
            #7e7d7d 20px);
}

.mstrip {
    position: absolute;
    background-color: rgb(255, 255, 255);
    width: 8em;
    height: 0.8em;
    top: 5em;
    left: .8em;
    border-radius: 2.5px;
}

.sstrip {
    position: absolute;
    background-color: rgb(255, 255, 255);
    width: 4.1em;
    height: 0.8em;
    top: 5em;
    left: 10em;
    border-radius: 2.5px;
}

.code {
    font-weight: bold;
    text-align: center;
    margin: .2em;
    color: rgb(180, 180, 180);
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(255, 255, 255, 0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 700px;
    height: 390px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
}

.flip-card-front {
    box-shadow: rgba(129, 127, 127, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(222, 222, 222, 0.2) 0px -1px 0px inset;
    background: url(@/assets/740296.png) no-repeat center center;
    background-size: 100%;

}

.flip-card-back {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(203, 201, 201, 0.3) 0px 7px 13px -3px, rgba(206, 205, 205, 0.2) 0px -1px 0px inset;
    background-color: #d5d5d5;
    transform: rotateY(180deg);
}
</style>